<template>
  <v-card>
    <v-card-title>
     <!-- <v-btn @click="addBrand" color="primary">新增品牌</v-btn>-->
      <v-spacer/>
      <v-text-field
        append-icon="search"
        label="搜索"
        single-line
        hide-details
        v-model="search"
      />
    </v-card-title>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="items"
      :pagination.sync="pagination"
      :total-items="totalItems"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.username }}</td>
        <td class="text-xs-center">{{ props.item.phone }}</td>
        <td class="text-xs-center">{{ props.item.created }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>Peek-a-boo!</v-card-text>
        </v-card>
      </template>
      <template slot="no-data">
        <v-alert :value="true" color="error" icon="warning">
          对不起，没有查询到任何数据 :(
        </v-alert>
      </template>
      <template slot="pageText" slot-scope="props">
        共{{props.itemsLength}}条,当前:{{ props.pageStart }} - {{ props.pageStop }}
      </template>
    </v-data-table>

    <v-dialog v-model="show" max-width="600" scrollable v-if="show">
      <v-card>
        <v-toolbar dark dense color="primary">
          <v-toolbar-title>{{isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="show = false">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="px-5 py-2">
          <!-- 表单 -->
          <brand-form :oldBrand="brand" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>

</template>

<script>
    export default {
        name: "UserList",
        data() {
            return {
                search: '',// 过滤字段
                totalItems: 0,// 总条数
                items: [],// 表格数据
                loading: true,
                pagination: {},// 分页信息
                headers: [// 表头
                    {text: 'id', align: 'center', value: 'id'},
                    {text: '用户名', align: 'center', sortable: true, value: 'username'},
                    {text: '电话', align: 'center', sortable: false, value: 'phone'},
                    {text: '注册日期', align: 'center',value: 'created'},
                    {text: '操作', align: 'center', value: 'id', sortable: false}
                ],
                show: false,// 是否弹出窗口
                isEdit: false // 判断是编辑还是新增
            }
        },
        mounted() {
            this.getDataFromApi();
        },
        methods:{
            getDataFromApi(){
                this.loading = true;
                // 200ms后返回假数据
                window.setTimeout(() => {
                    //发ajax获取服务器数据
                    this.$http({
                        method:"get",
                        url:"user/page",
                        params:{
                            pageNo:this.pagination.page,
                            pageSize:this.pagination.rowsPerPage,
                            sortBy:this.pagination.sortBy,
                            descending:this.pagination.descending,
                            key:this.search
                        }
                    }).then(resp=>{
                        this.items = resp.data.items;
                        this.totalItems = resp.data.total;
                        this.loading = false;
                    })
                }, 200)
            }
        },
        watch: {
            pagination: {
                handler() {
                    this.getDataFromApi();
                },
                deep: true
            },
            search: {
                handler() {
                    this.getDataFromApi();
                }
            },
            show(val, oldVal) {
                // 表单关闭后重新加载数据
                if (oldVal) {
                    this.getDataFromApi();
                }
            }
        }
    }
</script>

<style scoped>

</style>
